<template>
    <div class="mteam">
        <cube-scroll
                ref="scroll"
                class="scroll-body"
                :data="list"
                :options="options"
                @pulling-up="lists"
        >
            <div style="width: 100vw;height: 20px"></div>
            <div class="mteam-list" v-for="item in list">
                <div class="mteam-top">
                    <div class="mteam-left">
                        <img :src="item.user.avatarUrl" class="mteam-pic">
                        <div class="mteam-name">{{item.user.real_name}}</div>
                    </div>
<!--                    <div class="mteam-right">-->
<!--                        ¥8000-->
<!--                    </div>-->
                </div>
                <div class="mteam-bottom">
                    {{item.create_time}}
                </div>
            </div>
            <!-- 没有记录 -->
            <div class="yoshop-notcont" v-if="!list.length &&!isLoading">
                <!--                        <div class="iconfont icon-wushuju"></div>-->
                <div class="cont">亲，暂无团队哦</div>
            </div>
        </cube-scroll>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Mteam extends Sence {
        public list: any = []; // 总消费积分明细
        public page: number = 1; // 当前页码
        public size: any = 10; // 每页显示的条数
        public isLoading: boolean = true; // 加载锁
        public options: object = {
            pullUpLoad: true
        };//上拉加载

        /**
         * 初始化
         */
        public mounted(): void {
            this.lists();
        }

        /**
         * 团队列表
         */
        public lists(): void {
            this.post('api/user.dealer.team/lists', {
                type: 'first',
                page: this.page,
                size: this.size
            }).then((res: any) => {
               this.list=[...this.list,...res.data.list.data]
                this.page += 1;
                if (res.data.list.data.length < this.size) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
                this.isLoading = false;
            });
        }
    }


</script>

<style scoped lang="stylus">
    .scroll-body
        height 100vh

    .mteam-list
        margin 0 20px 20px 20px
        display flex
        flex-direction column
        box-shadow 0 0 10px #ccc
        padding 10px
        border-radius 8px

    .mteam-top
        display flex
        flex-direction row
        justify-content space-between
        align-items center

    .mteam-left
        display flex
        flex-direction row
        align-items center

    .mteam-pic
        width 50px
        height 50px

    .mteam-name
        margin-left 10px
        font-size 16px
        color #515151

    .mteam-right
        color #339933
        font-size 16px

    .mteam-bottom
        margin-top 10px
        color #808080

    .yoshop-notcont {
        padding: 65px 50px;
        box-sizing: border-box;
    }

    .yoshop-notcont .cont {
        display: block;
        text-align: center;
        font-size: 30 rpx;
        color: #999;
        margin-top: 10 rpx;
    }

</style>
